<!DOCTYPE html>
<html lang="zh">

<head>
    <title>术语抽取</title>
    <link id="theme" rel="stylesheet" type="text/css" href="../css/light.css">
    <link rel="stylesheet" type="text/css" href="../css/fonts.css">
</head>

<body class="dialogBody" onload="new TermExtraction();">
    <!-- 项目信息 -->
    <div class="term-extraction-info">
        <table class="fill_width">
            <tr>
                <td class="label-cell">
                    <label>项目：</label>
                </td>
                <td class="fill_width middle">
                    <span id="projectName" class="bold"></span>
                </td>
            </tr>
            <tr>
                <td class="label-cell">
                    <label>语言对：</label>
                </td>
                <td class="fill_width middle">
                    <span id="languagePair"></span>
                </td>
            </tr>
        </table>
    </div>

    <div class="divider"></div>

    <!-- 术语库选择 -->
    <div class="term-extraction-info">
        <table class="fill_width">
            <tr>
                <td class="label-cell">
                    <label for="glossarySelect">选择术语库：</label>
                </td>
                <td class="fill_width middle">
                    <select id="glossarySelect" class="table_select">
                        <option value="">请选择术语库...</option>
                    </select>
                </td>
            </tr>
        </table>
    </div>

    <div class="divider"></div>

    <!-- 进度显示 -->
    <div id="progressContainer" class="term-extraction-progress hidden">
        <table class="fill_width">
            <tr>
                <td class="label-cell">
                    <label>抽取进度：</label>
                </td>
                <td class="fill_width middle">
                    <div class="progressBar">
                        <div id="progressFill" class="progressFill"></div>
                    </div>
                    <span id="progressText">0%</span>
                </td>
            </tr>
        </table>
        <div id="currentSegment" class="term-extraction-current-segment">
            正在处理：本科教育质量管理体系建设...
        </div>
    </div>

    <div class="divider"></div>

    <!-- 抽取结果 -->
    <div id="resultsContainer" class="term-extraction-results">
        <div class="term-extraction-toolbar">
            <div>
                <span class="bold">抽取的术语：</span>
                <span id="termCount" class="small_text">(0 个术语)</span>
                <span class="small_text" style="color: #666; margin-left: 10px;">✓ 已自动过滤重复术语</span>
            </div>
            <div class="term-extraction-button-group">
                <button id="stopBtn" class="btn_secondary hidden">停止抽取</button>
                <button id="selectAllBtn" class="btn_secondary" disabled>全选</button>
                <button id="addSelectedBtn" class="btn_primary" disabled>添加选中术语</button>
            </div>
        </div>
        
        <!-- 术语添加进度提示 -->
        <div id="addingProgress" class="adding-progress">
            <div id="addingProgressText" class="adding-progress-text">正在添加术语到术语库...</div>
            <div class="adding-progress-bar">
                <div id="addingProgressFill" class="adding-progress-fill"></div>
            </div>
        </div>
        
        <div id="termsList" class="terms_list">
            <div id="noTermsMessage" class="center_text small_text">
                请先开始术语抽取
            </div>
        </div>
    </div>

    <!-- 操作按钮 -->
    <div class="toolbar" style="margin-top: 20px;">
        <button id="startBtn" class="btn_primary">开始抽取</button>
    </div>

    <!-- 加载JS文件 -->
    <script>
        console.log('HTML页面脚本开始执行');
        document.addEventListener('DOMContentLoaded', function() {
            console.log('DOMContentLoaded事件触发');
        });
        window.addEventListener('load', function() {
            console.log('window load事件触发');
        });
    </script>
    <script src="../js/termExtraction.js"></script>
    <script>
        console.log('termExtraction.js脚本已加载');
    </script>
</body>

</html> 